<script setup lang="ts">
  import { ref, reactive } from "vue"
  import { getTenantRolePage, getRoleDelete, getTenantSubKitchen } from '@/api/organizeFramework'
  import { getTenantTree } from '@/api/System'
  import {

    useUserStore,

  } from "@/store";
  import { createMessage } from '@/Public-UIlibrary/pb-message/method'
  import RoleModal from './components/RoleModal.vue'
  import Tree from './components/tree.vue'

  import dayjs from "dayjs"
  const userStore = useUserStore()
  const contentLeftTreeRef = ref(null)
  const isVisible = ref(false)
  let pages = reactive({
    currentPage: 1,
    pageSize: 15,
    total: 0,
  })
  let loading = ref(false)
  const RoleModalRef = ref()

  const resourceFormRef = ref()
  const rolesData = reactive({
    tableData: [],
    resourceIdList: []
  })
  const roleinfo = reactive({
    rolename: '',
    description: '',
    roleId: ''
  })
  let levelListData = reactive([

  ])
  const column = [{

    key: 'roleName',
    name: '角色名称',
  },
  {
    key: 'fromTenantName',
    name: '上级组织',
  },
  {
    key: 'toTenantNames',
    name: '关联食堂',

  },

  {
    key: 'createTime',
    name: '创建时间',
  },
  {
    key: 'description',
    name: '备注',
  },
  {
    slot: 'operation',
    name: '操作',
    width: 300,
  }]
  const resourceSearchForm = reactive({
    fromTenantId: userStore.pinia_userInfo.roleInfo.tenantId,
    roleName: '',
    beginDate: '',
    endDate: ''
  })
  const resourceDateRang = ref([resourceSearchForm.beginDate, resourceSearchForm.endDate])
  const dateChange = () => {
    resourceSearchForm.beginDate = dayjs(resourceDateRang.value[0]).format('YYYY-MM-DD')
    resourceSearchForm.endDate = dayjs(resourceDateRang.value[1]).format('YYYY-MM-DD')


  }
  let resourceTree = ref([])
  const onInit = () => {
    getresourcePageApi()
    getresourceTreeApi()
  }
  const setUserData = () => {

  }
  // 确认删除
  const onConfirmDelete = ({ roleId }) => {
    getRoleDeleteApi(roleId)
  }
  const onSearch = () => {
    getresourcePageApi()
  }
  // 添加
  const onAddFn = () => {
    RoleModalRef.value.onShow(null, resourceSearchForm.fromTenantId)
  }
  // 编辑 
  const onEdit = (row) => {

    RoleModalRef.value.onShow(row, resourceSearchForm.fromTenantId)
  }


  const offvisiblefn = () => {
    isVisible.value = false
  }
  // 选中树节点
  const treeNodeClick = ({ curNode }) => {

    resourceSearchForm.fromTenantId = curNode.tenantId
    getresourcePageApi()
  }
  // 分页器改变
  const onPagesChange = () => {
    getresourcePageApi()
  }
  const onReset = () => {
    pages.currentPage = 1
    resourceFormRef.value.resetFields()
    getresourcePageApi()
  }
  // 修改或添加成功
  const onConfirmModal = () => {
    onInit()
  }

  // 获取层级接口
  const getresourcePageApi = async () => {
    loading.value = true
    let { total, ...arg } = pages
    let res = await getTenantRolePage(
      {
        ...arg,
        sortingFields: [{
          field: "",
          order: ""
        }],
        ...resourceSearchForm
      }
    )
    loading.value = false
    if (res.code == 2000) {
      pages.total = res.data.total
      levelListData = [...res.data.records]

    }
  }


  // 获取组织树接口
  const getresourceTreeApi = async () => {
    let res = await getTenantTree({})
    if (res.code == 2000) {
      resourceTree.value = [res.data]
      setTimeout(() => {
        contentLeftTreeRef.value.setCheckedKeys([resourceSearchForm.fromTenantId])
      })
    }
  }
  //  删除角色
  const getRoleDeleteApi = async (roleId) => {
    let res = await getRoleDelete({
      roleId
    })
    if (res.code == 2000) {
      createMessage({
        message: '删除成功',
        type: 'success'
      })
      onInit()
    }
  }
  onMounted(() => {
    onInit()
  })
</script>

<template>
  <div class="app-container flex flex-col">
    <SearchCard @onSearch="onSearch" @onReset="onReset">
      <el-form :model="resourceSearchForm" ref="resourceFormRef" label-width="auto" :inline="true">
        <el-form-item label="创建时间">
          <pb-date-picker v-model="resourceDateRang" placeholder="请输入菜谱日期" @change="dateChange"></pb-date-picker>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <pb-input v-model="resourceSearchForm.roleName" placeholder="请输入角色名称" />
        </el-form-item>

      </el-form>
    </SearchCard>
    <pb-card padding="0px">
      <ContentOperation>
        <pb-button size="small" plain @click="onAddFn">+添加角色</pb-button>
      </ContentOperation>
      <div class="flex">

        <ContentLeftTree ref="contentLeftTreeRef" :nodeKey="tenantId" :treeData="resourceTree" label="tenantName"
          @nodeClick="treeNodeClick">
        </ContentLeftTree>
        <pb-card width="84%">

          <pb-table :tableData='levelListData' :loading="loading" :column='column' :bottomElement="['pb-page']">
            <template v-slot:operation="scope">
              <div class="flex">

                <pb-button text @click="onEdit(scope.row)">编辑</pb-button>
                <p class="divider mr-2 ml-2"></p>
                <PopconfirmButton @confirm="onConfirmDelete(scope.row)"></PopconfirmButton>
              </div>
            </template>
          </pb-table>
          <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
            @onChange="onPagesChange" :total="pages.total"></pb-pagination>
        </pb-card>
      </div>
    </pb-card>
    <RoleModal ref="RoleModalRef" @onConfirmModal="onConfirmModal"></RoleModal>

  </div>
</template>

<style lang="less" scoped></style>
